import React from 'react';
import { Grid, Row, Col } from 'react-bootstrap';
// import moment from 'moment';
// import BigDatePicker from '../../components/date/BigDatePicker';

import CheckButtons from '../../components/form/CheckButtons';

import { Bar, BaseLine, BasePie } from '../../components/chart';

import { timeTypeList } from './data-conf';

function barChartData(timeType) {
  const data = [];
  const type = timeType === '7d' ? '星期' : '小时';
  for (let i = 0; i < 7; i += 1) {
    data.push({
      time: `${type}${i + 1}`,
      value: (Math.random() * 1000).toFixed(0),
    });
  }
  return data;
}

export default class Statistical extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      timeType: '12h',
      barData: [],
    };

    this.handleTimeTypeChange = this.handleTimeTypeChange.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.needLoad) {
      this.setState({
        barData: barChartData(this.state.timeType),
      });
    }
  }

  handleTimeTypeChange(timeType) {
    this.setState({
      timeType,
      barData: barChartData(timeType),
    });
  }

  render() {
    return (
      <Grid>
        <Row>
          <Col xs={12} md={4}>
            <CheckButtons
              type="radio"
              data={timeTypeList}
              name="timeType"
              defaultValue="12h"
              style={{ marginBottom: '20px' }}
              onChange={v => this.handleTimeTypeChange(v)}
            />
          </Col>
        </Row>
        <Row>
          <Col xs={12} md={6}>
            <Bar
              data={this.state.barData}
              height={300}
              width={500}
              x="time"
              y="value"
            />
          </Col>
          <Col xs={12} md={6}>
            <Bar
              data={this.state.barData}
              height={300}
              width={500}
              transpose
              x="time"
              y="value"
            />
          </Col>
          <Col xs={12} md={6}>
            <BaseLine
              data={this.state.barData}
              height={300}
              width={500}
              x="time"
              y="value"
            />
          </Col>
          <Col xs={12} md={6}>
            <BasePie
              data={this.state.barData}
              height={300}
              width={500}
              x="time"
              y="value"
            />
          </Col>
        </Row>
      </Grid>
    );
  }
}
